<template>
  <div class="image-container">
    <!-- 操作按钮 -->
    <div class="btnGroup">
      <el-radio-group v-model="isCollapse" size="small" @change="changeCollapse">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button size="small" type="success" @click="dialogVisible = true" v-if="isShowAdd">添加素材</el-button>
    </div>
    <!-- 上传素材对话框 -->
    <el-dialog title="上传素材" :visible.sync="dialogVisible" width="30%">
      <el-upload class="upload-demo" drag action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images" multiple
        :headers="headers" name="image" :on-success="uploadImage">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
    <!-- 素材内容 -->
    <el-row :gutter="10">
      <el-col :xs="12" :sm="6" :md="6" :lg="4" v-for="(item,index) in imagesList" :key="item.id" class="image-item"
        style="padding:0" @click.native="selectedImage=index">
        <el-image style="height: 100%;width:100%" :src="item.url"></el-image>
        <div v-if="selectedImage===index&&!isShowSelected" class="selectedImage"></div>
        <div class="image-option" v-if="isShowCollected">
          <i :class="{'el-icon-star-on':item.is_collected,'el-icon-star-off':!item.is_collected}"
            @click="changeIsCollect(item)"></i>
          <i class="el-icon-delete" @click="deleteImage(item.id)"></i>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="searchForm.per_page"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :disabled="loading">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    getAllImagesInfo,
    isCollect,
    deleteImage
  } from '@/api/image.js'
  export default {
    name: 'ImageList',
    props: {
      isShowAdd: {
        type: Boolean,
        default: true
      },
      isShowCollected: {
        type: Boolean,
        default: true
      },
      isShowSelected: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        selectedImage: null,
        dialogVisible: false,
        isCollapse: false,
        //搜索参数
        searchForm: {
          collect: false,
          page: 1,
          per_page: 10,
        },
        imagesList: [],
        total: 0,
        loading: false,
        headers: {
          Authorization: 'Bearer ' + sessionStorage.getItem('token')
        }
      }
    },
    created() {
      this.searchAllImages()
    },
    methods: {
      searchAllImages() {
        this.loading = true
        this.searchForm.collect = false
        this.searchForm.page = 1
        getAllImagesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.total = total_count
          this.imagesList = results
          this.loading = false
        })
      },
      searchMyImages() {
        this.loading = true
        this.searchForm.collect = true
        this.searchForm.page = 1
        getAllImagesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.total = total_count
          this.imagesList = results
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.loading = true
        this.searchForm.per_page = val
        this.searchForm.page = 1
        getAllImagesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.total = total_count
          this.imagesList = results
          this.loading = false
        })
      },
      handleCurrentChange(val) {
        this.loading = true
        this.searchForm.page = val
        getAllImagesInfo(this.searchForm).then(res => {
          const {
            results,
            total_count
          } = res.data.data
          this.imagesList = results
          this.total = total_count
          this.loading = false
        })
      },
      changeCollapse(newVal) {
        if (this.isCollapse) {
          this.searchMyImages()
        } else {
          this.searchAllImages()
        }
      },
      deleteImage(id) {
        deleteImage(id).then(res => {
          if (this.isCollapse) {
            this.searchMyImages()
          } else {
            this.searchAllImages()
          }
        })
      },
      changeIsCollect(image) {
        image.is_collected = !image.is_collected
        isCollect(image.id, image.is_collected).then(res => {
          if (this.isCollapse) {
            this.searchMyImages()
          } else {
            this.searchAllImages()
          }
        })
      },
      uploadImage() {
        this.dialogVisible = false
        if (this.isCollapse) {
          this.searchMyImages()
        } else {
          this.searchAllImages()
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .btnGroup {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .image-item {
    width: 200px;
    height: 200px;
    border: 1px dashed #ddd;
    position: relative;
    display: inline-block;
    margin: 0 30px 20px;
  }

  .image-option {
    background-color: rgba(204, 204, 204, .3);
    height: 30px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    font-size: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
  }

  .selectedImage {
    background: url('../assets/selected.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

</style>
